<template>
  <VueDraggable :key="item.itemid"
    class="card-phone-item-drag-temp card-unit"
    :class="{
      'is-card-selected': curPanelTarget.itemId == item.itemid,
    }"
    :draggable='draggable'
    @click="click2Select($event, item)"
    @dragStart="dragStart($event, item, index)"
    @dragEnd="dragEnd"
    @dragEnter="dragEnter($event, item)"
    @dragLeave="dragLeave($event, item)"
    @dropStop="drop($event, item, index)">
      <!-- 更多编辑 ... 按钮 -->
      <!-- v-if="draggable && curPanelTarget.itemId == item.itemid" -->
      <el-popover
        v-if="draggable && curPanelTarget.itemId == item.itemid"
        popper-class="card-mg-pop-cls"
        placement="right"
        trigger="hover">
          <CardMgMenu
            @onDeleteCard="onDeleteCard"
            @onUpCard="onUpCard"
            @onUpTopCard="onUpTopCard"
            @onDownCard="onDownCard"
            @onDownBottomCard="onDownBottomCard">
          </CardMgMenu>
          <template #reference>
            <el-icon class="card-mg-icon"><more-filled /></el-icon>
          </template>
      </el-popover>

      <slot></slot>
  </VueDraggable>
</template>

<script>
  import VueDraggable from '@/views/card/components/drag/VueDraggable.vue';
  import CardMgMenu from '@/views/card/right/CardMgMenu.vue';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  export default {
    name: 'PanelItemDrag',
    mixins: [PanelCommonComputed],
    data() {
      return {
        /* config */

        /* drag */
        dragEnterTargetId: null,
      }
    },
    props: {
      item: Object,
      index: Number,
      draggable: Boolean,  // 用于区别 simple 模式 / multiple 模式
    },
    components: {
      VueDraggable,
      CardMgMenu,
    },
    methods: {
      /* mg & menu */
      click2Select(e, item) {  /* card元素选择 */  // e, item, parent
        // 1. 阻止事件冒泡
        e.stopPropagation();

        // 2. a. curPanelTarget.itemId;  b. 是否 parentId？
        this.updatePanelCurTarget({
          itemId: item.itemid,
          parentId: this.draggable ? this.curPanelTarget.parentId : '',
        });

        // 3. 清除 dragEnterTargetId
        this.dragEnterTargetId = null;
      },

      /* update */
      onDeleteCard() {
        // 0. if selected?
        if(this.curSelectPanelIndex < 0) return;

        // 2. panelLists 删除 panel
        let newLists = _.cloneDeep(this.panelLists);
        newLists.splice(this.curSelectPanelIndex, 1);

        // 3. update
        this.updatePanelLists(newLists);

        // 4. select / drag id 清除
        this.dragEnterTargetId = null;

        // 5. updatePanelCurTarget
        this.updatePanelCurTarget({
          ...this.curPanelTarget,
          itemId: '',
        });
      },

      onUpCard() {
        // 1. up panel
        let arr = this.upOneHandler(this.panelLists, this.curSelectPanelIndex);

        // 2. 更新 panelLists
        this.updatePanelLists(arr);
      },
      upOneHandler(lists, index) {
        let arr = _.cloneDeep(lists);
        let temp = arr.splice(index, 1);
        let newIndex = index - 1 <= 0 ? 0 : index - 1;
        arr.splice(newIndex, 0, temp[0]);
        return arr;
      },

      onUpTopCard() {
        // 1. up top card
        let arr = this.upTopHandler(this.panelLists, this.curSelectPanelIndex);

        // 2. 更新 panelLists
        this.updatePanelLists(arr);
      },
      upTopHandler(lists, index) {
        let arr = _.cloneDeep(lists);
        let temp = arr.splice(index, 1);
        arr.unshift(temp[0]);
        return arr;
      },

      onDownCard() {
        // 1. down card
        let arr = this.downOneHandler(this.panelLists, this.curSelectPanelIndex);

        // 2. 更新 panelLists
        this.updatePanelLists(arr);
      },
      downOneHandler(lists, index) {
        let arr = _.cloneDeep(lists);
        let temp = arr.splice(index, 1);
        let newIndex = index + 1;
        arr.splice(newIndex, 0, temp[0]);
        return arr;
      },

      onDownBottomCard() {
        // 1. down bottom card
        let arr = this.downBottomHandler(this.panelLists, this.curSelectPanelIndex);

        // 2. 更新 panelLists
        this.updatePanelLists(arr);
      },
      downBottomHandler(lists, index) {
        let arr = _.cloneDeep(lists);
        let temp = arr.splice(index, 1);
        arr.push(temp[0]);
        return arr;
      },

      /* 被拖拽元素 */
      dragStart(e, item, index) {
        // 1. dataTransfer.setData
        // let tar = e.target;
        e.dataTransfer.setData('text/plain', index);
        // if(tar.tagName.toLowerCase() == 'li') {}  // 判断被拖拽元素

        // 2. a. curPanelTarget.itemId;  b. 是否 parentId？
        this.updatePanelCurTarget({
          ...this.curPanelTarget,
          itemId: item.itemid,
        });
      },
      dragEnd() {  // e, item
        this.dragEnterTargetId = null;
      },
      /* 目标元素 */
      dragEnter(e, item) {
        this.dragEnterTargetId = item.itemid;
      },
      dragLeave() {
        this.dragEnterTargetId = null;
      },
      drop(e, item, index) {
        e.preventDefault();
        e.stopPropagation();
        let dragIndex = e.dataTransfer.getData('text/plain');
        this.dropStopHandler(item, index, dragIndex);
      },
      dropStopHandler(item, index, dragIndex) {
        // 1. panelLists
        let arr = _.cloneDeep(this.panelLists);
        let temp = arr.splice(dragIndex, 1);
        arr.splice(index, 0, temp[0]);
        arr = this.setPanelItemsIndex(arr);

        // 2. 更新 panelLists
        this.updatePanelLists(arr);

        // 3. 清除 dragEnterTargetId
        this.dragEnterTargetId = null;
      },
      setPanelItemsIndex(lists) {  /* Idx_index 排序 */
        return lists.map((item, index) => {
          item.Idx_index = index.toString();
          return item;
        });
      },
    },
  }
</script>

<style lang="scss">
  .card-unit {
    position: relative;
    width: 100%;
    border: 1px solid #f2f2f2;
    // background: #fff;
    margin-bottom: 9px;

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 9;
    }
  }

  .is-card-selected {
    border: 1px solid #409eff !important;
  }
  .is-card-selected::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0px 0px 5px 5px rgba(64, 158, 255, 0.1);
    z-index: 9;
  }
  .is-list-selected {
    border: 1px dashed #e6ad38 !important;
  }
  .is-list-selected::before {
    box-shadow: inset 0px 0px 5px 5px rgba(230, 173, 56, 0.1);
  }
  .is-list-editable::before {
    content: initial;
  }

  .card-mg-icon {
    position: absolute;
    right: 0px;
    // top: 50%;
    top: 0;
    // transform: translateY(-50%);
    padding: 0 2px;
    background: rgba(64, 158, 255, .5);
    border-radius: 0 0 0 10px;
    font-size: 24px;
    z-index: 99;
  }
  .card-mg-icon:hover {
    background: rgba(64, 158, 255, 1);
    transition: all .5s;
  }
  .card-mg-pop-cls {
    min-width: 0 !important;
    padding: 10px 0 !important;
  }
</style>
